<template>
  <div  style="padding-bottom:2rem;">
    <div class="main-box">
      <div class="header">
        <div class="img">
          <a :class="unread_list.length>0?'bell-tips':''" @click="handleClickShowTips">
            <img src="/static/icons/bell.png" alt="">
          </a>
          {{$t('ProfilePage.zssjw')}}: {{user.parent?user.parent.username:$t('ProfilePage.w')}}
          <a href="#/Infor">
            <img src="/static/icons/set.png" alt="">
          </a>
        </div>
        <div class="info">
          <img :style="rotateVal" v-if="hasHeadphotoLoaded" @click="handleClickHeadphoto" :src="user.headphoto?user.headphoto:defaultPhoto" alt="" class="headerImg">
          <div class="name"><strong>{{user.username}}</strong>
            <em>{{user.vip==null?$t('ProfilePage.pthy'):user.vip.name+'V'+user.vip_id_level}}</em>
            <small>{{$t('ProfilePage.yqm')}}:{{user.share_code}} <em class="copy copy-share-code" @click="copyShare" data-clipboard-action="copy" :data-clipboard-text="user.share_code" style="float:none;display: inline;">{{ $t('ProfilePage.fz') }}</em></small>
          </div>
          <img v-if="user && user.is_ygj" class="robot" src="/static/img/robot.png" alt="">
        </div>
        <div class="balance">
          <p>
            <span>{{ $t('ProfilePage.jb') }}</span>
            <em>￥
          <small>{{user.balance}}</small></em></p>
          <button><a href="/#/withdraw">{{ $t('ProfilePage.qb') }}</a></button>
        </div>
        <div class="yh"></div>
      </div>
      <div class="tuitui">
        <ul>
          <li @click="handleClickGo(1)">
            <div>{{ $t('ProfilePage.yqhy') }}</div>
            <div>{{ $t('ProfilePage.yqtzz') }}</div>
          </li>
          <li @click="handleClickGo(2)">
            <div>{{ $t('ProfilePage.wdtd') }}</div>
            <div>{{ $t('ProfilePage.yqyqz') }}</div>
          </li>
        </ul>
      </div>
      <div>
        <div class="credit-tips">{{ $t('ProfilePage.xydj') }}</div>
        <div style="padding: 0 0.5rem;">
          <van-steps :active="2">
            <van-step>{{ $t('ProfilePage.fh') }}</van-step>
            <van-step>{{ $t('ProfilePage.xz') }}</van-step>
            <van-step>{{ $t('ProfilePage.lh') }}</van-step>
            <van-step>{{ $t('ProfilePage.yx') }}</van-step>
          </van-steps>
        </div>
      </div>
      <ul class="login_nav">
        <li><a href="/#/profile_detail">
          <img src="../../static/icons/profile/icon-info.png" alt="">
          <p>{{ $t('ProfilePage.grxx') }}</p></a></li>
        <li><a href="/#/bind_account">
          <img src="../../static/icons/profile/icon-record.png" alt="">
          <p>{{ $t('ProfilePage.zhbd') }}</p></a></li>
        <li><a href="/#/day_report">
          <img src="../../static/icons/profile/icon-report2.png" alt="">
          <p>{{ $t('ProfilePage.rjbb') }}</p></a></li>
        <li><a href="/#/income">
          <img src="../../static/icons/profile/icon-detail.png" alt="">
          <p>{{ $t('ProfilePage.syjl') }}</p></a></li>
        <li><a href="/#/invite">
          <img src="../../static/icons/profile/icon-invite.png"  alt="">
          <p style="color:red;">{{ $t('ProfilePage.yqhy') }}</p></a></li>
        <li><a href="/#/recharge">
          <img src="../../static/icons/profile/icon-recharge.png" alt="">
          <p>{{ $t('ProfilePage.czjl') }}</p></a></li>
        <li><a href="/#/withdraw">
          <img src="../../static/icons/profile/icon-withdraw.png" alt="">
          <p>{{ $t('ProfilePage.txjl') }}</p></a></li>
        <!--li><a @click="handleClickGoVipZoom">
          <img src="../../static/img/robot.png" alt="">
          <p>{{ $t('ProfilePage.ygj') }}</p></a></li-->
        <li><a href="/#/level_distribution">
          <img src="../../static/icons/profile/icon-report.png" alt="">
          <p>{{ $t('ProfilePage.tdbb') }}</p></a></li>
        <li><a href="/#/help">
          <img src="../../static/icons/profile/icon-help.png" alt="">
          <p>{{ $t('ProfilePage.bzsc') }}</p></a></li>
        <li><a href="/#/chou">
          <img src="../../static/icons/profile/icon-chou.png" alt="">
          <p>{{ $t('ProfilePage.xycj') }}</p></a></li>
        <li><a href="/#/shop">
          <img src="../../static/icons/profile/icon-shop.png" alt="">
          <p>{{ $t('ProfilePage.ssxd') }}</p></a></li>
        <li><a href="/#/publish">
          <img src="../../static/icons/profile/icon-publish.png" alt="">
          <p>{{ $t('ProfilePage.fbrw') }}</p></a></li>
        <li><a href="/#/credit">
          <img src="../../static/icons/profile/icon-credit.png" alt="">
          <p>{{ $t('ProfilePage.wdxy') }}</p></a></li>
        <li><a href="/#/logout">
          <img src="../../static/icons/profile/icon-quit.png" alt="">
          <p>{{ $t('ProfilePage.tcdl') }}</p></a></li>
<!--        <li><a href="/#/remove_watermark">-->
<!--          <img src="../../static/img/douyin.png" alt="">-->
<!--          <p>{{ $t('ProfilePage.dyqsy') }}</p></a></li>-->
      </ul>
    </div>
    <nut-popup position="bottom" :overlay="false" closeable close-icon="cross" v-model="showChangePwd" close-icon-position="top-right">
      <div style="padding:1.3rem 0.3rem">
        <nut-row>
          <nut-col :span="24">
            <nut-textinput
              placeholder="$t('ProfilePage.qsrxdmm')"
              v-model="newPassword"
              label=""
              type="password"
            />
          </nut-col>
        </nut-row>
        <nut-row>
          <nut-col :span="8">
            <nut-button
              @click="handleClickUpdatePwd"
              type="light"
            >{{ $t('ProfilePage.bc') }}
            </nut-button>
          </nut-col>
        </nut-row>
      </div>
    </nut-popup>
    <nut-popup position="top" :overlay="false" closeable close-icon="cross" :style="{ height:'100%' }" v-model="showTips" close-icon-position="top-right">
      <div style="padding:1.3rem 0.3rem">
        <ul v-if="unread_list.length>0" class="unread-list">
          <li v-for="item in unread_list">
            {{item.task_proto.title}} <span style="float:right">$t('ProfilePage.y'){{item.when}} <span style="color:green;">{{ $t('ProfilePage.tg') }}</span></span>
          </li>
        </ul>
        <div v-else>
          <EmptyBox text="ProfilePage.zwjl"/>
        </div>
      </div>
    </nut-popup>
    <nut-popup v-model="showPhotoBox" position="left" :style="{ height:'100%' }">
      <ul class="headphoto-box">
        <li v-for="item in headphotoArr">
          <img :src="item" alt="" @click="handleClickSelPhoto(item)">
        </li>
      </ul>
    </nut-popup>
    <MainNav nav_index="4"/>
  </div>
</template>

<script>
import Vue from 'vue';
import MainNav from "../components/MainNav";
import Notice from "../components/Notice";
import EmptyBox from "../components/EmptyBox";
import { Step, Steps} from 'vant';

import 'vant/lib/step/style';
import 'vant/lib/steps/style';

Vue.use(Step);
Vue.use(Steps);

export default {
  name: 'ProfilePage',
    components: {EmptyBox, MainNav,Notice},
    data () {
    return {
      msg: 'Hello profile',
      user:{},
      showChangePwd: false,
      newPassword: '',
        rotateVal:'',
        hasHeadphotoLoaded: false,
        showPhotoBox: false,
        showTips: false,
        defaultPhoto:'/static/img/headphoto/2.2.jpg',
        headphotoArr:[
          "/static/img/headphoto/1.1.jpg",
          "/static/img/headphoto/1.2.jpg",
          "/static/img/headphoto/2.0.jpg",
          "/static/img/headphoto/1.4.jpg",
          "/static/img/headphoto/1.5.jpg",
          "/static/img/headphoto/1.6.jpg",
          "/static/img/headphoto/1.7.jpg",
          "/static/img/headphoto/1.8.jpg",
          "/static/img/headphoto/1.9.jpg",
          "/static/img/headphoto/2.1.jpg",
          "/static/img/headphoto/2.2.jpg",
          "/static/img/headphoto/2.3.jpg",
          "/static/img/headphoto/2.5.jpg",
        ],
        unread_list: [],
        is_vip: false,
    }
  },
    methods:{
        handleClickShowTips(){
            if(this.unread_list.length>0){
                this.showTips = true;
                this.setOrdersRead();
            }
        },
        handleClickNavTitle(){

        },
        getData(){
            this.$axios.get(this.$api_url.user).then((res)=>{
                this.user = res.data;
                this.is_vip = this.user.is_vip;
                this.hasHeadphotoLoaded = true
                setTimeout(()=>{
                    this.rotateVal="transform:rotate(360deg)";
                },300);
            })
        },
        getUnreadList(){
            this.$axios.get(this.$api_url.order_unread_list).then((res)=>{
                this.unread_list = res.data;
            })
        },
        setOrdersRead(){
            if(this.unread_list.length == 0){
                return;
            }
            let ids = [];
            this.unread_list.forEach((item)=>{
                ids.push(item.id);
            });
            this.$axios.post(this.$api_url.set_order_read,this.$qs.stringify({
                ids: ids
            })).then((res)=>{
                if(res.data.code == 0){
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
            })
        },
        handleClickOpenServer(){
            this.$toast.text("正在链接...");
            _MEIQIA('init');
        },
        handleClickHeadphoto(){
           this.showPhotoBox = true;
        },
        handleClickChangePwd(){
            this.showChangePwd = true;
        },
        handleClickUpdatePwd(){
            this.showChangePwd = false;
            if(this.newPassword){
                this.$axios.post(this.$api_url.update_pwd,this.$qs.stringify({
                    val:this.newPassword
                })).then((res)=>{
                    if(res.data.code === 0){
                        this.$toast.success(res.data.msg);
                    } else{
                        this.$toast.fail(res.data.msg);
                    }
                })
            }
        },
        handleClickGoVipZoom(){
            if(!this.is_vip || this.user.vip_id < 4){
                this.$toast.fail(this.$t("ProfilePage.bxsaskzsfw")+'!');
                return;
            }
            location.href='/#/robot'
        },
        copyShare(){
            let clipboard = new this.$clipboard(".copy-share-code");
            clipboard.on('success', ()=> {
                this.$toast.success(this.$t("ProfilePage.fzcg"));
            });
            clipboard.on('error', ()=> {
                this.$toast.fail(this.$t("ProfilePage.fzsb"));
            });
        },
        handleClickSelPhoto(val){
            this.showPhotoBox = false;
            this.user.headphoto = val;
            this.$axios.post(this.$api_url.save_headphoto,this.$qs.stringify({
                url:val
            })).then((res)=>{
            })
        },
        handleClickGo(index){
            switch(index){
                case 1:
                    location.href="/#/invite";
                    break;
                case 2:
                    location.href="/#/level_distribution";
                    break;
            }
        }
    },
    mounted() {
      this.getData();
      this.getUnreadList();
    },
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  a{
    color:#111;
  }
  .main-box{
    text-align: left;
  }
  .header{
    color: #464646!important;
    font-size: .373333rem;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 3.146667rem;
    padding: 0 .32rem;
    width: 100%;
    height: 6.386667rem;
    background: url(/static/img/profile-bg.png);
    background-size: 100% 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 0!important;
  }
  .header .img{
    margin-top: .96rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 .533333rem;
  }
  .header .img img{
    width: .586667rem;
    height: .586667rem;
    display: block;
    vertical-align: middle;
  }
  .header .info{
    margin-top: .626667rem;
    padding-left: .533333rem;
    overflow: hidden;
  }
  .header .info .headerImg{
    width: 1.333333rem;
    height: 1.333333rem;
    display: block;
    border-radius: 50%;
    float: left;
    border: .013333rem solid #fff;
    box-sizing: border-box;
  }
  .header .info .name{
    margin-left: .32rem;
    float: left;
  }
  .header .info .name strong{
    font-size: .48rem;
    color: #171717;
    display: block;
    float: left;
  }
  .header .info .name em
  {
    display: block;
    float: left;
    margin-left: .16rem;
    height: .426667rem;
    background: rgba(0,0,0,.2);
    color: #fff;
    border-radius: .053333rem;
    font-size: .266667rem;
    line-height: .426667rem;
    text-align: center;
    margin-top: .106667rem;
    padding-left:0.1rem;
    padding-right:0.1rem;
  }
  .header .info .name small{
    clear: both;
    font-size: .346667rem;
    color: #434343;
    margin-top: .8rem;
    display: block;
    text-align: left;
  }
  .header .balance{
    width: 8.88rem;
    height: 2.146667rem;
    background: url(/static/img/card-bg.png) no-repeat;
    background-size: 100% 100%;
    margin: .533333rem auto auto;
    padding: 0 .426667rem;
    position: relative;
  }
  .header .balance p{
    float: left;
    font-size: .373333rem;
    color: #f2d8be;
    text-align: left;
  }
  .header .balance p span{
    color: hsla(0,0%,100%,.6);
    margin-top: .32rem;
    display: block;
  }
  .header .balance p em{
    display: block;
    margin-top: .2rem;
    color: #f2d8be;
    font-style: normal;
    font-size: .346667rem;
  }
  .header .balance p em small{
    font-size: .586667rem;
    font-weight: 700;
  }
  button{
    width: 100%;
    font-size: .4rem;
    line-height: .986667rem;
    color: #fff;
    text-align: center;
    border-radius: .08rem;
    background-color: #2f3848;
    margin-top: .48rem;
  }

  .header .balance button{
    display: block;
    float: right;
    margin-left: .426667rem;
    width: 1.546667rem;
    height: .746667rem;
    border: none;
    background: hsla(0,0%,100%,.2);
    border-radius: .373333rem;
    margin-top: .733333rem;
    font-size: .373333rem;
    text-align: center;
    line-height: .746667rem;
    color: #fff;
  }
  .header .balance button a{
    color:#fff;
  }

  .yh{
    width: 100%;
    height: .92rem;
    background-image: url(/static/img/card-bottom.png);
    background-size: 100%;
    position: absolute;
    bottom: 0;
  }

  .login_nav{
    border-top: .013333rem solid #f2f2f2;
    background: #fff;
    overflow: hidden;
  }

  .login_nav li{
    float: left;
    width: 33.33%;
    box-sizing: border-box;
    border-right: .013333rem solid #eee;
    border-bottom: .013333rem solid #eee;
    text-align: center;
    padding: .56rem 0 .066667rem;
  }

  .login_nav li img{
    height: 1.04rem;
  }
  .login_nav li p{
    font-size: .373333rem;
    line-height: 1.2rem;
    color: #333;
  }
  .LoginOut{
    margin-top:0.5rem;
    padding: 0 .333333rem .666667rem;
  }

  .headphoto-box{
    padding:0.6rem;
    text-align: center;
  }
  .headphoto-box::-webkit-scrollbar {
    display:none
  }
  .headphoto-box img{
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    border: thin solid #ccc;
  }
  .bell-tips{
    -webkit-animation: icon-bounce 4s infinite;
    -moz-animation: icon-bounce 0.5s infinite;
    -o-animation: icon-bounce 0.5s infinite;
    animation: icon-bounce 0.5s infinite;
  }
  .unread-list{
    text-align: left;
  }
  .unread-list li{
    padding: 0.2rem 0;
    border-bottom: thin dashed #ccc;
    font-size:0.4rem;
  }
  .credit-tips{
    text-align: center;
    position: relative;
    top:5px;
    font-weight: bold;
  }
  .robot{
    width: 50px;
    height: auto;
    float: right;
    margin-right: 20px;
  }
  .tuitui ul{
    overflow: hidden;
  }
  .tuitui ul li {
    float: left;
    width: 50%;
    text-align: center;
    background: url(/static/img/task_bg4.png);
    color: #333;
    padding: 0.3rem;
    font-size: 0.4rem;
  }
  .tuitui ul li:first-child{
    border-right: thin solid #fff;
  }
</style>
